<template>
  <!-- 阶段进度组件 -->
  <div class="checkbox-multiple" v-loading="isLoading">
    <div class="checkbox-list">
      <template v-if="optionsData.length">
        <el-checkbox-group v-model="filterListData[0].value">
          <el-checkbox :value="item.id" v-for="item in optionsData" :key="item.id">
            <span>{{ item.labelName }}</span>
          </el-checkbox>
        </el-checkbox-group>
      </template>
      <el-empty v-else :image-size="60" />
    </div>
    <div class="checkbox-multiple__buttons">
      <el-button type="primary" class="buttons-cancel" link size="default" @click="handelReset">重置</el-button>
      <el-button type="primary" class="buttons-confirm" size="default" @click="handelConfirm">确定</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getAllListByType } from "@/apis/system";
import useFilterComponents from "@/views/engineeringManage/hooks/useFilterComponents";

const props = defineProps({
  filterList: {
    type: Array,
    default: () => [
      {
        title: "阶段进度",
        filterId: "stage_id",
        condition: [
          {
            label: "在列表",
            value: "jsonIn"
          }
        ],
        option: {
          type: "MultipleSelect",
          lazy: true,
          dataSource: {
            type: "url",
            value: "/xxx"
          }
        },
        compare: "jsonIn",
        value: []
      }
    ]
  }
});

const emits = defineEmits(["handelFilterData"]);
const { handelReset, handelConfirm, filterListData } = useFilterComponents(props, emits);

const isLoading = ref(false);
const optionsData = ref([]);
/**
 * 阶段类型列表
 */
const getStageList = async () => {
  try {
    isLoading.value = true;
    const { data } = await getAllListByType({ type: "stage" });
    optionsData.value = data ?? [];
    isLoading.value = false;
  } catch (err) {
    isLoading.value = false;
  }
};
getStageList();
</script>

<style scoped lang="scss">
@import "stageProgress";
</style>
